
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素删除和插入操作</title>
		<script src="js/jquery-1.11.1.js"></script>
		<!-- 元素删除和插入操作：针对 元素 增删改
		 append()    功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()   功能：
		 after()     
		 before()
		 
		 remove()
		 empty()
		 -->
		 <style>
			 button{
				 margin: 5px;
				 padding: 10px 15px;
				 cursor: pointer;
			 }
			 body{
				 margin: 20px;
			 }
			 #target{
				 border: 1px solid #a181ff;
				 border-radius: 5px;
				 margin-top: 10px;
				 padding: 10px;
			 }
		 </style>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">清楚元素</button>
		<!-- 1.目标显示区 -->
		<div id="target">
			<p>目标元素的默认段落~~</p>
		</div>
		<!-- 2.替换和插入的元素块区域  隐藏 -->
		<div id="newElement">
			<p>这是插入和替换的元素块段落~~</p>
		</div>
		<script>
			// 1.点击  内部末尾插入 按钮 实现
			$("#appendBtn").click(function(){
				//插入新增元素 -- 1.1创建新元素
				//根据所抓元素--复制新元素
				var nw=$("#newElement").clone();
				//复制div加p空间元素，含原有属性--显示display
				nw.css("display","block");
				//1.3 复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").append(nw);
			});
			
			$("#prependBtn").click(function(){
				//插入新增元素 -- 1.1创建新元素
				//根据所抓元素--复制新元素
				var nw=$("#newElement").clone();
				//复制div加p空间元素，含原有属性--显示display
				nw.css("display","block");
				//1.3 复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").prepend(nw);
			});
			
			$("#afterBtn").click(function(){
				//插入新增元素 -- 1.1创建新元素
				//根据所抓元素--复制新元素
				var nw=$("#newElement").clone();
				//复制div加p空间元素，含原有属性--显示display
				nw.css("display","block");
				//1.3 复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").after(nw);
			});
			
			$("#beforeBtn").click(function(){
				/* 
				插入新增元素 -- 1.1创建新元素
				根据所抓元素--复制新元素 
				*/
				var nw=$("#newElement").clone();
				/* 复制div加p空间元素，含原有属性--显示display */
				nw.css({"display","block",
					"width":"200px",
					"height":"200px",
					"background":"#e4393c",
					"color":"#e4393c",
					"border-radius":"50%",
				});
				/* 1.3 复制新元素并且改变属性【显示】，插入内部尾部 */
				$("#target").before(nw);
			});
			
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			
			//6.点击，替换元素按钮  将当前效果替换为新效果
			$("#replaceWithBtn").click(function(){
				var c=$("#target").clone().css("display","block");
				$("#target").replaceWith();
			});
		</script>
	</body>
</html>